<template>
  <div class="information-box">
    <common-title title-name="税收分类" />
    <public-table :table-option="tableOption" :table-data="tableData" :height="550" :page="pageParam"
      @page-change="onPageChange" selection @handleSelectionChange="onSelectChange">
      <el-form @submit.native.prevent>
        <el-row>
          <el-col :span="6" class="p-r10">
            <el-form-item label="商品和服务分类简称">
              <el-input v-model="searchParam.abbrName" placeholder="请输入商品和服务分类简称" clearable style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="6" class="p-r10">
            <el-form-item label="货物和劳务名称">
              <el-input v-model="searchParam.serviceName" placeholder="请输入货物和劳务名称" clearable style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="display: flex;align-items: center;">
            <el-form-item>
              <div class="d-flex">
                <el-button class="button_view" @click="searchHandler">查询</el-button>
                <el-button color="#f0f0f0" style="color: #000000" @click="resetHandler">重置</el-button>
              </div>
              <el-divider direction="vertical" />
              <div class="d-flex">
                <el-button class="button_edit" @click="addHandler">新增分类</el-button>
                <el-button class="button_edit" @click="deleteHandler">删除分类</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #operate="{ row }">
        <el-button size="small" class="button_edit" @click="editHandler(row)">编辑</el-button>
      </template>
    </public-table>
    <categoryDialog ref="categoryDialogRef" @success="getList" />
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElButton, ElForm, ElFormItem, ElInput, ElNotification, ElRow, ElCol, ElDivider, ElMessageBox } from "element-plus";
import CommonTitle from "@/components/CommonTitle.vue";
import PublicTable from "@/components/PublicTable.vue";
import categoryDialog from "./components/categoryDialog.vue";
import { invoiceInfoApi } from "@/api/businessFinance.js";
import { onMounted } from "vue";

let tableOption = ref([
  {
    prop: "abbrName",
    label: "商品和服务分类简称",
    minWidth: 200,
  },
  {
    prop: "serviceName",
    label: "货物和劳务名称",
    minWidth: 200,
  },
  {
    prop: "code",
    label: "税收分类编码",
    minWidth: 200,
  },
  {
    prop: "departmentNames",
    label: "使用部门",
    minWidth: 200,
  },
  {
    prop: "describe",
    label: "说明",
    minWidth: 100,
  },
  {
    prop: "taxRate",
    label: "增值税税率 （%）",
    minWidth: 180,
  },
  {
    prop: "taxManage",
    label: "增值税特殊管理",
    minWidth: 150,
  },
  {
    prop: "updateUserName",
    label: "更新人",
    minWidth: 100,
  },
  {
    prop: "updateTime",
    label: "更新时间",
    minWidth: 200,
  },
  {
    prop: "operate",
    label: "操作",
    width: 200,
    slot: true,
    slotName: "operate",
    fixed: "right",
    overHidden: false
  },
]);
let tableData = ref([]);

let pageParam = reactive({
  total: 0,
  current: 1,
  size: 20
});
let onPageChange = (e) => {
  pageParam.current = e.page;
  pageParam.size = e.limit;
  getList();
};

let selectItem = ref([]);
let onSelectChange = (arr) => {
  selectItem.value = arr;
};

let searchParam = reactive({
  abbrName: "",
  serviceName: ""
});
let searchHandler = () => {
  getList();
};
let resetHandler = () => {
  for (let key in searchParam) {
    searchParam[key] = "";
  }
  getList();
};

let categoryDialogRef = ref(null);
let editHandler = (row) => {
  categoryDialogRef.value.openHandler("编辑分类", row);
};
let addHandler = () => {
  categoryDialogRef.value.openHandler("新增分类");
};
let deleteHandler = () => {
  if (!selectItem.value.length) {
    ElNotification.warning("请选择需要删除的数据");
    return
  }
  ElMessageBox.confirm(`确认删除选中数据吗？`, "提示", {
    confirmButtonText: "确认",
    confirmButtonClass: "button_view",
    cancelButtonText: "取消",
    cancelButtonClass: "button_cancel2"
  }).then(async () => {
    let arr = [];
    for (const obj of selectItem.value) {
      arr.push(obj.typeId);
    }
    let res = await invoiceInfoApi.deleteCate({
      ids: arr.join(",")
    });
    if (res.code === "200") {
      ElNotification.success("删除成功");
      getList();
    }
  }).catch(() => { })
};

let getList = async () => {
  let res = await invoiceInfoApi.getPageList({
    pageNum: pageParam.current,
    pageSize: pageParam.size,
    param: {
      abbrName: searchParam.abbrName,
      serviceName: searchParam.serviceName,
    }
  });
  if (res.data) {
    pageParam.total = res.data.totalSize;
    tableData.value = res.data.content;
  }
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.p-r10 {
  padding-right: 10px;
}
</style>
